<template>
    <!-- WebGIS -->
    <div class="gis-container">
        <div ref="mapContainer" class="map"></div>
        <div class="map-controls">
            <button @click="zoomIn" class="control-btn">+</button>
            <button @click="zoomOut" class="control-btn">-</button>
            <button @click="toggleFullscreen" class="control-btn">⤢</button>
        </div>
    </div>
</template>
  
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
  
const mapContainer = ref(null);
let map = null;
let fullscreen = false;
  
// 初始化地图
const initMap = () => {
    map = L.map(mapContainer.value, {
        center: [30.6667, 104.0667], // 成都中心
        zoom: 12,
        zoomControl: false,
        preferCanvas: true,
        attributionControl: false
    });
  
    // 添加科技感底图
    L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);
  
    // 添加科技感光效
    addGlowEffect();
};
  
  // 添加地图光效
const addGlowEffect = () => {
    const glowLayer = L.layerGroup().addTo(map);
    
    // 随机生成一些光点
    for (let i = 0; i < 50; i++) {
        const lat = 30.6667 + (Math.random() - 0.5) * 0.1;
        const lng = 104.0667 + (Math.random() - 0.5) * 0.1;
      
        const glow = L.circleMarker([lat, lng], {
            radius: Math.random() * 3 + 1,
            color: '#00f2fe',
            fillColor: '#00f2fe',
            fillOpacity: 0.7,
            weight: 0
        }).addTo(glowLayer);
      
        // 动画效果
        let radius = glow.getRadius();
        setInterval(() => {
            radius = radius === 3 ? 1 : 3;
            glow.setRadius(radius);
        }, 1000);
    }
};
  
const zoomIn = () => {
    map.zoomIn();
};
  
const zoomOut = () => {
    map.zoomOut();
};
  
const toggleFullscreen = () => {
    fullscreen = !fullscreen;
    if (fullscreen) {
        mapContainer.value.style.position = 'fixed';
        mapContainer.value.style.top = '0';
        mapContainer.value.style.left = '0';
        mapContainer.value.style.width = '100%';
        mapContainer.value.style.height = '100%';
        mapContainer.value.style.zIndex = '9999';
        map.invalidateSize();
    } else {
        mapContainer.value.style.position = 'relative';
        mapContainer.value.style.width = '100%';
        mapContainer.value.style.height = '100%';
        map.invalidateSize();
    }
};
  
onMounted(() => {
    initMap();
    
    // 响应式调整
    window.addEventListener('resize', () => {
        map.invalidateSize();
    });
});
  
onBeforeUnmount(() => {
    if (map) {
        map.remove();
    }
});
</script>
  
<style lang="scss" scoped>
.gis-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
}
  
.map {
    width: 100%;
    height: 100%;
    background: transparent;
}
  
.map-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
  
.control-btn {
    width: 40px;
    height: 40px;
    background: rgba(10, 25, 47, 0.8);
    border: 1px solid rgba(0, 242, 254, 0.3);
    color: #00f2fe;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;

    &:hover{
        background: rgba(0, 242, 254, 0.2);
        box-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
    }
}
</style>